<template>
	<view class="pageBox" :style="{ paddingTop: statusBarHeight + 'px' }">
		<!-- 头部信息 -->
		<view class="head-nav"
			:style="{position: 'fixed', top: 0, left: 0, zIndex: 2, paddingTop: statusBarHeight + 'px'}">
			<view class="left-info"></view>
			<view class="title">我的</view>
			<view class="right-info">
				<view class="icon">
					<image @click="goPage(`/setting/setting?wxOpenid=${info.wxOpenid}`)"
						src="http://www.bobei.shop/static/third/my/icon/Slice 33@2x.png"></image>
				</view>
				<view class="icon" @click="goPage('/home/notice')">
					<image src="http://www.bobei.shop/static/third/my/icon/Slice 28@2x.png">
						<!-- 红点 -->
					<!-- 	<view class="red-o"></view> -->
				</view>
			</view>
		</view>
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="head-img">
				<image :src="info.avatar" mode=""></image>
			</view>
			<view class="middle-info">
				<view class="user-name">{{info.nickname}}
					<view class="red">{{info.longVip == 1 ? "VIP（永久）" : info.levelName}}</view>
				</view>
				<view class="user-id">ID：{{info.id}} <span>{{ info.account }}</span></view>
			</view>
			<view class="right-icon" @click="goPage('/setting/infomation')">
				<image src="http://www.bobei.shop/static/third/my/icon/Slice 25@2x.png">
			</view>
		</view>
		<!-- 账户信息 -->
		<view class="account-info">
			<view class="collect flex-center" @click="goPage('/serviceCenter/collect')">
				<view class="bold">{{ collectTotal }}</view>
				<view>收藏</view>
			</view>
			<view class="balance flex-center" @click="goPage(wallets[0].url)">
				<view class="bold">{{ wallets[0] ? wallets[0].balance : ""}}</view>
				<view>余额</view>
			</view>
			<view class="vip flex-center">
				<view class="bold">{{ info.longVip == 1 ? "永久经纪商" : "永久经纪商" }}</view>
				<view class="vip-info">
					<image src="http://www.bobei.shop/static/third/my/icon/vip.png" v-if="info.decFinal == 1">
						<image src="http://www.bobei.shop/static/third/my/icon/vipa.png"
							v-if="info.decFinal == 0 && info.waitDec == 0">
							<view class="vip-name flex-center" @click="onClearBtn">
								{{info.decFinal == 0 && info.waitDec == 1 ? "永久" : '升级'}}</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="info flex-row">
			<view class="orderBox">
				<view class="order">
					<view class="orderTop flex-between">
						<view class="orderTopR flex">
							<view class="l"></view>
							我的订单
						</view>
						<button class="orderTopL" :plain="true" @click.stop="goOrder(0)">全部订单</button>
					</view>

					<view class="orderTopB flex-around">
						<view class="orderTopBItem flex-center" @click.stop="goOrder(4)">
							<image class="orderTopBItemImg" src="http://www.bobei.shop/static/third/my/icon/1.png"
								mode="">
							</image>
							<view class="orderTopBItemTitle">
								已完成
							</view>
							<view class="orderTopBItemNum">
								{{ info.orderCompletedNum }}
							</view>
						</view>
						<view class="orderTopBItem flex-center" @click.stop="goOrder(1)">
							<image class="orderTopBItemImg" src="http://www.bobei.shop/static/third/my/icon/2.png"
								mode="">
							</image>
							<view class="orderTopBItemTitle">
								待付款
							</view>
							<view class="orderTopBItemNum">
								{{ info.orderPaymentNum }}
							</view>
						</view>

						<view class="orderTopBItem flex-center" @click.stop="goOrder(2)">
							<image class="orderTopBItemImg" src="http://www.bobei.shop/static/third/my/icon/3.png"
								mode="">
							</image>
							<view class="orderTopBItemTitle">
								待发货
							</view>
							<view class="orderTopBItemNum">
								{{ info.orderShippedNum }}
							</view>
						</view>

						<view class="orderTopBItem flex-center" @click.stop="goOrder(3)">
							<image class="orderTopBItemImg" src="http://www.bobei.shop/static/third/my/icon/4.png"
								mode="">
							</image>
							<view class="orderTopBItemTitle">
								已发货
							</view>
							<view class="orderTopBItemNum">
								{{ info.orderReceivedNum }}
							</view>
						</view>

						<view class="orderTopBItem flex-center" @click="goPage('/afterSale/afterList')">
							<image class="orderTopBItemImg" src="http://www.bobei.shop/static/third/my/icon/5.png"
								mode="">
							</image>
							<view class="orderTopBItemTitle">
								退货售后
							</view>
							<view class="orderTopBItemNum">
								{{ info.orderRefundNum }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 兑换栏 -->
		<view class="con flex">
			<view class="conLeft flex">
				<view class="conLeftItem flex-center">
					<view class="num">
						{{ Number(jiFen).toFixed(2) }}
					</view>
					<view class="text">
						积分
					</view>
				</view>
				<view class="conLeftItem flex-center" @click="goPage(wallets[1].url)">
					<view class="num">
						{{ wallets[1] ? Number(wallets[1].balance).toFixed(2) : ""}}
					</view>
					<view class="text">
						转赠积分
					</view>
				</view>
				<view class="conLeftItem flex-center" @click="goPage(wallets[2].url)">
					<view class="num">
						{{ wallets[2] ? Number(wallets[2].balance).toFixed(2) : ""}}
					</view>
					<view class="text">
						普通积分
					</view>
				</view>
			</view>

			<view class="conRight flex-row" @click="goPage('/property/exchange')">
				<view class="conRightLine"></view>
				<view class="conRightCon flex-center">
					<image class="conRightImg2" src="http://www.bobei.shop/static/third/my/icon/Slice 103@2x.png">
						<view class="conRightText">
							兑换
						</view>
				</view>
			</view>
		</view>
		<!-- 易付豆栏 -->
		<view class="con flex">
			<view class="conLeft flex">
				<view class="conLeftItem flex-center" @click="goPage(wallets[3].url)">
					<view class="num">
						{{ wallets[3] ? wallets[3].balance : ""}}
					</view>
					<view class="text">
						贡献值
					</view>
				</view>
				<view class="conLeftItem flex-center" @click="goPage(wallets[4].url)">
					<view class="num">
						{{ wallets[4] ? wallets[4].balance : ""}}
					</view>
					<view class="text">
						原始仓单
					</view>
				</view>
				<view class="conLeftItem flex-center" @click="goPage(wallets[5].url)">
					<view class="num">
						{{ wallets[5] ? wallets[5].balance == 0 ? "0.00" : wallets[5].balance : ""}}
					</view>
					<view class="text">
						持有仓单
					</view>
				</view>
			</view>

			<view class="conRight flex-row" @click="goPage('/balance/yiFuBalanceCopy')">
				<view class="conRightLine"></view>
				<view class="conRightCon flex-center">
					<image class="conRightImg2" src="http://www.bobei.shop/static/third/my/icon/Slice 104@2x.png">
						<view class="conRightText">
							易付豆
						</view>
				</view>
			</view>
		</view>

		<!-- 邀请 -->
		<view class="invite-banner">
			<view class="bg">
				<image src="http://www.bobei.shop/static/third/my/banner.png" mode=""></image>
			</view>
			<view class="flex">
				<view class="left-info">
					<view class="title">
						邀请有礼
						<view class="when">?</view>
					</view>
					<view class="bottom-info">
						邀请好友、获得更多权益、兑换好礼
					</view>
				</view>
				<view class="right-btn flex-center">
					<view class="btn flex-center">
						<button @click="goPage('/serviceCenter/invite?userid=' + info.id)">去邀请</button>
					</view>

				</view>
			</view>
		</view>

		<!-- 底部功能 -->
		<view class="applyBox">
			<view class="headline">
				<view class="l"></view>
				常用服务
			</view>

			<view class="balanceBox flex">
				<view class="balanceItem flex-center" @click="goPage('/serviceCenter/team')">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/my/icon/Slice 107@2x.png">
						<view class="balanceItemB">
							我的推广
						</view>
				</view>

				<view class="balanceItem flex-center" @click="goPage('/serviceCenter/boundExchange')">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/my/icon/Slice 108@2x.png">
						<view class="balanceItemB">
							绑定交易所
						</view>
				</view>

				<view class="balanceItem flex-center" @click="goPage('/serviceCenter/address')">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/my/icon/Slice 109@2x.png">
						<view class="balanceItemB">
							地址管理
						</view>
				</view>

				<view class="balanceItem flex-center" @click="onKeFu">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/my/icon/Slice 110@2x.png">
						<view class="balanceItemB">
							联系客服
						</view>
				</view>
				<view class="balanceItem flex-center" @click="goService" v-if="info.sharer != 3">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/my/icon/Slice 111@2x.png">
						<view class="balanceItemB">
							服务中心
						</view>
				</view>

				<view class="balanceItem flex-center" @click="goOperating">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/my/icon/Slice 112@2x.png">
						<view class="balanceItemB">
							运营中心
						</view>
				</view>


				<view class="balanceItem flex-center" @click="goPage('/serviceCenter/invite?userid=' + info.id)">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/my/icon/Slice 113@2x.png">
						<view class="balanceItemB">
							邀请好友
						</view>
				</view>

				<view class="balanceItem flex-center" @click="goPage('/pages/my/bank/myBankCard')">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/Slice167@2x.png">
						<view class="balanceItemB">
							银行卡
						</view>
				</view>
				
				<view class="balanceItem flex-center" @click="goPage('/serviceCenter/shareCenter')">
					<image class="balanceItemImg" src="http://www.bobei.shop/static/third/fenXiangZhongXin.png">
						<view class="balanceItemB">
							分享中心
						</view>
				</view>

			</view>
		</view>
		<view class="signOut flex-center">
			<button class="signOutBtn" @click="signOut">退出登录</button>
		</view>

		<!-- 完善信息提示弹窗组件 -->
		<perfect-information :showTips="showTips" :mask="mask" :type="type" @tipsOpen="tipsOpen" @tipsClose="tipsClose"
			@onPrefect="onPrefect"></perfect-information>

		<!-- 退出登录确定弹窗 -->
		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle"
			:deterContent="deterContent"></determined-popover>

		<!-- 尚未达到升级永久VIP的资格 弹窗 -->
		<determined-popover :showTips="determinedShow2" @tipsOpen="determineTipsOpen2" @tipsClose="determineTipsClose2"
			@onDeterClose="onDeterClose2" @onPrefect="determineOnPrefect2" :deterTitle="deterTitle2"
			:deterContent="deterContent2"></determined-popover>

		<!-- 清零贡献值和转赠积分 弹窗 -->
		<determined-popover :showTips="determinedShow3" @tipsOpen="determineTipsOpen3" @tipsClose="determineTipsClose3"
			@onDeterClose="onDeterClose3" @onPrefect="determineOnPrefect3" :deterTitle="deterTitle3"
			:deterContent="deterContent3"></determined-popover>
	</view>
</template>

<script>
	import determinedPopover from "../../components/determined-popover/determined-popover.vue";
	import perfectInformation from "../../components/perfect-information/perfect-information.vue";
	export default {
		components: {
			"perfect-information": perfectInformation,
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				determinedShow: false,
				deterTitle: "",
				deterContent: "",

				determinedShow2: false,
				deterTitle2: "",
				deterContent2: "",

				determinedShow3: false,
				deterTitle3: "",
				deterContent3: "",

				info: {},
				showTips: false,
				mask: true,
				type: "center",

				collectTotal: 0,
				jiFen: 0, //  转赠积分 + 普通积分
				wallets: [{
					label: "余额",
					value: "credit_1",
					balance: "0",
					url: "/balance/balance",
				}, {
					label: "转赠积分",
					value: "credit_7",
					balance: "0",
					url: "/property/transferTntegral",
				}, {
					label: "普通积分",
					value: "credit_11",
					balance: "0",
					url: "/property/ordinaryIntegral",
				}, {
					label: "贡献值",
					value: "credit_2",
					balance: "0",
					url: "/property/placingQuota",
				}, {
					label: "原始仓单",
					value: "yuanNum",
					balance: "0",
					url: "/property/origWareRece",
				}, {
					label: "持有仓单",
					value: "puNum",
					balance: "0",
					url: "/property/ordinaryWarehouseReceipt",
				}],
				serviceStatus: "",
				operatingStatus: "", // 申请状态。1：已签约；0：申请中；-1：签约失败 空是未申请
				statusBarHeight: '',
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// 取消全屏
			// plus.navigator.setFullscreen(false);
			// #endif
			// console.log(this.$mySysInfo(), "系统信息");
			this.statusBarHeight = this.$mySysInfo().top;
		},

		methods: {
			signOut() {
				this.deterTitle = "退出登录";
				this.deterContent = "确定要退出登录吗？";
				this.determinedShow = true;
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
				this.determinedShow = false;
				uni.clearStorageSync("token")
				uni.reLaunch({
					url: "/pages/login/index"
				})
			},

			open() {
				this.deterTitle2 = "提示";
				this.deterContent2 = "很抱歉，您尚未达到升级永久VIP的资格";
				this.determinedShow2 = true;
			},
			determineTipsOpen2(param) {
				this.determinedShow2 = param;
			},
			determineTipsClose2(param) {
				this.determinedShow2 = param;
			},
			onDeterClose2() {
				this.determinedShow2 = false;
			},
			determineOnPrefect2() {
				this.determinedShow2 = false;
			},

			onClearBtn() {
				let that = this;
				if (that.info.decFinal == 0 && that.info.waitDec == 1) {
					that.deterTitle3 = "提示";
					that.deterContent3 = "清零贡献值和转赠积分？";
					that.determinedShow3 = true;
				} else if (that.info.decFinal == 0 && that.info.waitDec == 0) {
					that.open();
				}
			},
			determineTipsOpen3(param) {
				this.determinedShow3 = param;
			},
			determineTipsClose3(param) {
				this.determinedShow3 = param;
			},
			onDeterClose3() {
				this.determinedShow3 = false;
			},
			determineOnPrefect3() {
				this.$post({
					module: "User",
					interface: "8008",
				}).then(resp => {
					this.determinedShow3 = false;
					uni.showToast({
						icon: 'none',
						title: '操作成功',
						duration: 1500,
					})
					this.getInfo();
				})
			},
			getCollectTotal() {
				this.$post({
					url: "/portal/Shop",
					module: 'Goods',
					interface: 2002,
					data: {
						page: 1,
						lastId: 0,
					},
				}).then(res => {
					this.collectTotal = res.total;
				})
			},

			goOrder(param) {
				uni.navigateTo({
					url: '/pages/my/order?tabId=' + param
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			goService() {
				// console.log("服务中心");

				if (this.serviceStatus == 1) {
					// 成功后跳转
					// uni.navigateTo({
					//   url: '/pages/my/service'
					// })
					uni.navigateTo({
						url: '/serviceCenter/serviceCentre'
					})
				} else {
					uni.navigateTo({
						url: '/serviceCenter/applyService'
					})
				}
			},
			goOperating() {
				// console.log("运营中心");
				if (this.operatingStatus == 1) {
					// 成功后跳转
					// uni.navigateTo({
					//   url: '/pages/my/operating'
					// })
					uni.navigateTo({
						url: '/serviceCenter/operationCenter'
					})
				} else {
					uni.navigateTo({
						url: '/serviceCenter/applyOperating'
					})
				}
			},
			getInfo() {
				this.$post({
					module: "User",
					interface: "1000",
				}).then(res => {
					console.log("user", res)
					this.info = res;
					
					this.wallets.forEach(item => item.balance = res[item.value]);
					this.jiFen = Number(res.credit_7) + Number(res.credit_11) == 0 ? "0.00" : Number(res
						.credit_7) + Number(res.credit_11);
					uni.setStorageSync('user', JSON.stringify(res))
					if (!res.mobile) {
						this.showTips = true;
					}
				})
			},

			// 获取服务中心申请信息
			getStatus() {
				this.$post({
					module: "User",
					interface: "3003",
					data: {
						type: "1",
					},
				}).then(res => {
					// console.log("serviceStatus", res);
					this.serviceStatus = res.status;
				})
			},
			// 获取运营中心申请信息
			getStatus2() {
				this.$post({
					module: "User",
					interface: "3003",
					data: {
						type: "2",
					},
				}).then(res => {
					// console.log("operatingStatus", res);
					this.operatingStatus = res.status;
				})
			},
			onKeFu() {
				uni.navigateTo({
					url: '/pages/home/webview?url=' + encodeURIComponent(this.info.kefu)
				})
			},
			tipsOpen(param) {
				this.showTips = param;
			},
			tipsClose(param) {
				this.showTips = param;
			},
			onPrefect() {
				uni.navigateTo({
					url: "/setting/improveData"
				})
				this.showTips = false;
			},
		},
		onShow() {
			this.getStatus();
			this.getStatus2();
			this.getInfo();
			this.getCollectTotal();
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-bottom) - var(--window-top));
		padding-bottom: 34rpx;
		background: #fff;

		.head-nav {

			width: 100%;
			display: flex;
			line-height: 100rpx;
			padding: 0 30rpx;
			background: #FFF;


			.left-info {
				width: 25%;
			}

			.title {
				width: 50%;
				text-align: center;
				font-weight: 600;
				font-size: 40rpx;
			}

			.right-info {
				width: 25%;
				display: flex;

				.icon {
					width: 48rpx;
					margin-left: auto;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-top: 26rpx;
						position: absolute;
					}

					.red-o {
						width: 18rpx;
						height: 18rpx;
						background: red;
						border-radius: 18rpx;
						position: absolute;
						top: 22rpx;
						right: 0rpx;
					}
				}
			}
		}

		.user-info {
			background: #FFF;
			display: flex;
			padding: 20rpx 30rpx;
			padding-top: 120rpx;

			.head-img {
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.middle-info {
				margin-left: 20rpx;
				margin-top: 10rpx;


				.user-name {
					height: 40rpx;
					line-height: 40rpx;
					display: flex;
					font-size: 36rpx;

					.red {
						height: 30rpx;
						line-height: 28rpx;
						margin-top: 5rpx;
						margin-left: 30rpx;
						background: #F95D53;
						border-radius: 4rpx;
						padding: 0 10rpx;
						font-size: 18rpx;
						color: #FFF;
					}
				}

				.user-id {
					color: #A4A4A4;

					span {
						margin-left: 30rpx;
					}
				}
			}

			.right-icon {
				margin-left: auto;

				image {
					margin-top: 30rpx;
					width: 30rpx;
					height: 38rpx;
				}
			}
		}

		.account-info {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 60rpx;
			background: #FFF;

			.collect {
				flex-direction: column;
			}

			.balance {
				flex-direction: column;
			}

			.vip {
				flex-direction: column;

				.vip-info {
					position: relative;
					height: 40rpx;

					.vip-name {
						position: absolute;
						width: 72rpx;
						height: 40rpx;
						bottom: 0;
						left: 50%;
						transform: translate(-50%,0);
						font-size: 20rpx;
						color: #FFF;
						padding-top: 12rpx;
					}

					image {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translate(-50%,0);
						width: 72rpx;
						height: 40rpx;
					}
				}
			}

			.bold {
				font-weight: bold;
			}

		}

		.info {
			padding: 0 32rpx 32rpx;
			position: relative;
			width: 100%;
			margin-bottom: 230rpx;
			margin-top: 30rpx;
			z-index: 0;

			.orderBox {
				width: 100%;
				padding: 0 32rpx;
				margin-top: 48rpx;
				position: absolute;
				left: 0;
				bottom: -200rpx;
				z-index: 1;

				.order {
					width: 100%;
					padding: 32rpx;
					height: 236rpx;
					background: #FFF;
					border-radius: 16rpx;
					box-shadow: 0 10rpx 10rpx #99999920;

					.orderTop {
						width: 100%;

						.orderTopR {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000;
							line-height: 44rpx;

							.l {
								width: 4rpx;
								height: 24rpx;
								background: linear-gradient(180deg, #E3CE0C 0%, #F95C54 100%);
								border-radius: 76rpx 76rpx 76rpx 76rpx;
								opacity: 1;
								margin-top: 10rpx;
								margin-right: 15rpx;
							}

						}

						.orderTopL {
							padding: 0;
							margin: 0;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #afa9b0;
							line-height: 36rpx;
							border: none;
						}
					}

					.orderTopB {
						margin-top: 28rpx;

						.orderTopBItem {
							flex-direction: column;
							position: relative;

							.orderTopBItemImg {
								width: 60rpx;
								height: 60rpx;
							}

							.orderTopBItemTitle {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #000;
								line-height: 32rpx;
								margin-top: 8rpx;
							}

							.orderTopBItemNum {
								width: 30rpx;
								text-align: center;
								font-size: 18rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFF;
								line-height: 24rpx;
								background: #FE2E1C;
								border-radius: 30rpx;
								white-space: nowrap;
								padding: 2rpx 4rpx;
								position: absolute;
								top: 0;
								right: 0;
							}
						}
					}
				}
			}
		}


		.con {
			width: 686rpx;
			height: 154rpx;
			background: #FFF;
			border-radius: 16rpx;
			margin: 32rpx auto 0;
			box-shadow: 0 10rpx 10rpx #99999920;


			.conLeft {
				width: 534rpx;

				.conLeftItem {
					width: 33.33%;
					flex-direction: column;

					.num {
						font-size: 30rpx;
						font-family: PingFangSC-Semibold;
						line-height: 32rpx;
						color: #1F0F26;
						word-break: break-all;
					}

					.text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular;
						line-height: 32rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}

			.conRight {
				flex: 1;


				.conRightLine {
					width: 2rpx;
					height: 100%;
					// background: #A4A4A4;
					box-shadow: -2rpx 0rpx 5rpx #99999950;

				}

				.conRightCon {
					flex: 1;
					flex-direction: column;

					.conRightImg {
						width: 90rpx;
						height: 51rpx;
					}

					.conRightImg2 {
						width: 51rpx;
						height: 51rpx;
					}

					.conRightText {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34rpx;
						color: #EC615C;
					}
				}


			}
		}

		.invite-banner {
			position: relative;
			width: 100%;
			height: 160rpx;
			top: 30rpx;

			.bg {
				position: absolute;
				width: 100%;
				height: 160rpx;
				padding: 0 30rpx;


				image {
					width: 100%;
					height: 160rpx;
				}
			}

			.flex {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 160rpx;
				padding: 0 30rpx;

				.left-info {
					color: #DC5B76;
					padding: 30rpx;

					.title {
						display: flex;
						font-size: 34rpx;
						margin-top: 15rpx;
						font-weight: 600;

						.when {
							width: 34rpx;
							height: 34rpx;
							line-height: 30rpx;
							text-align: center;
							border: 2rpx solid #DC5B76;
							border-radius: 34rpx;
							font-size: 24rpx;
							margin-top: 6rpx;
							margin-left: 6rpx;
						}
					}

					.bottom-info {
						font-size: 24rpx;
					}
				}

				.right-btn {
					width: 35%;
					margin-left: auto;

					.btn {

						button {
							width: 131rpx;
							font-size: 26rpx;
							color: #DC5B76;
							height: 55rpx;
							background: linear-gradient(180deg, #FEE0DE 0%, #FEE6E2 100%);
							border-radius: 28rpx 28rpx 28rpx 28rpx;
							font-weight: bold;
							white-space: nowrap;
						}
					}


				}
			}
		}

		.applyBox {
			width: 686rpx;
			background-color: #FFF;
			border-radius: 16rpx;
			margin: 32rpx auto 0;
			padding: 32rpx 0;

			.balanceBox {
				width: 100%;
				flex-wrap: wrap;

				.balanceItem {
					width: 33.3%;
					margin: 30rpx 0;
					flex-direction: column;
					background: #FFF;
					border-radius: 16rpx;

					.balanceItemP {
						font-size: 30rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #000;
						line-height: 32rpx;
						word-break: break-all;
						margin-bottom: 10rpx;
					}

					.balanceItemB {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000;
						line-height: 32rpx;

					}

					.balanceItemImg {
						width: 84rpx;
						height: 84rpx;
						display: block;
						margin-bottom: 8rpx;
					}
				}
			}



			.headline {
				padding: 0 32rpx 4rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000;
				line-height: 44rpx;
				display: flex;

				.l {
					width: 4rpx;
					height: 24rpx;
					background: linear-gradient(180deg, #E3CE0C 0%, #F95C54 100%);
					border-radius: 76rpx 76rpx 76rpx 76rpx;
					opacity: 1;
					margin-top: 10rpx;
					margin-right: 15rpx;
				}
			}
		}

		.signOut {
			margin-top: 34rpx;

			.signOutBtn {
				width: 385rpx;
				height: 83rpx;
				background: #F2615F;
				border-radius: 41rpx 41rpx 41rpx 41rpx;
				opacity: 1;
				color: #FFF;
				padding: 0;
				margin: 0;
				border-radius: 52rpx;
				box-shadow: 0 8rpx 2rpx #D42A28;
			}
		}
	}
</style>
